<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="btn">存储cookie</button>
    <button class="get">获取cookie</button>
</body>
<script>

    var btn = document.querySelector(".btn");
    var getBtn = document.querySelector(".get");

    btn.onclick = function () {
        // 存 (设置过期时间  + 存储路径)
        // var date = new Date();
        // date.setDate(date.getDate() + 7);  // 在原本的日期基础上加7

        // document.cookie = "user=a123123;expires=" + date.toUTCString() + ";path=/";
        // document.cookie = "pwd=123123;expires=" + date.toUTCString() + ";path=/";
        // document.cookie = "phone=17386141517;expires=" + date.toUTCString() + ";path=/";
        // document.cookie = "email=123@qq.com;expires=" + date.toUTCString() + ";path=/";


        // 存cookie
        setCookie("user", "a123123", 7);   //实际参数
        setCookie("pwd", "123123", 7);
        setCookie("phone", "17386141517", 7);
        setCookie("email", "123@qq.com", 7);

        // 

    }

    getBtn.onclick = function () {
        var user = getCookie("user");
        console.log(user);
        var pwd = getCookie("pwd");
        console.log(pwd);
    }



    // 函数封装  
    // 把完成特定功能的代码抽离出来,放到函数中,形成一个独立的整体,起一个函数名

    // 设置cookie  根据键名 存储键值
    function setCookie(key, val, day, path = "/") { // 形式参数
        if (day) {  //有过期时间  就就设置
            var date = new Date();
            date.setDate(date.getDate() + day);  // 在原本的日期基础上加7
            document.cookie = key + "=" + val + ";expires=" + date.toUTCString() + ";path=" + path;
        } else {  //没有过期时间 默认浏览器关闭过期
            document.cookie = key + "=" + val + ";path=" + path;
        }
    }


    // 获取cookie  根据键名 获取键值

    function getCookie(key) {
        var cookie = document.cookie;  //获取cookie
        if (cookie) {  //  有cookie的时候在处理
            var dataList = cookie.split("; ");
            // console.log(dataList);
            for (var i = 0; i < dataList.length; i++) {  //遍历数据 取的每一条数据
                var item = dataList[i];  //"user=a123123", "pwd=123123", "email=123@qq.com", "phone=17386141517"
                // console.log(item);
                var arr = item.split("=");
                // console.log(arr);
                var name = arr[0]; // "user","pwd","email"
                var val = arr[1];
                if (key == name) {
                    return val;
                }
            }
        }
        return "";
    }


    // function getCookie(key) {
    //     var cookie = document.cookie;  //获取cookie
    //     var data = {};
    //     if (cookie) {  //  有cookie的时候在处理
    //         var dataList = cookie.split("; ");
    //         // console.log(dataList);

    //         for (var i = 0; i < dataList.length; i++) {  //遍历数据 取的每一条数据
    //             var item = dataList[i];  //"user=a123123", "pwd=123123", "email=123@qq.com", "phone=17386141517"
    //             // console.log(item);
    //             var arr = item.split("=");
    //             // console.log(arr);
    //             var name = arr[0]; // "user","pwd","email"
    //             var val = arr[1];
    //             data[name] = val;
    //         }

    //         return data[key];

    //     }
    //     return "";
    // }









</script>

</html>